import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { svgBuilder } from './plugins/svgBuilder'
import postCssPxToRem from 'postcss-pxtorem'

// https://vitejs.dev/config/
export default defineConfig({
	base: './',
	plugins: [vue(), svgBuilder('./src/assets/icons/')],
	server: {
		host: true, //解决“vite use `--host` to expose”
		port: 9095,
		open: true
	},
	resolve: {
		alias: [
			{
				find: '@',
				replacement: resolve(__dirname, 'src')
			}
		]
	},
	css: {
		postcss: {
			plugins: [
				require('autoprefixer')({
					overrideBrowserslist: [
						'Android 4.1',

						'iOS 7.1',

						'Chrome > 31',

						'ff > 31',

						'ie >= 8',

						'> 1%'
					],

					grid: true
				}),
				postCssPxToRem({
					// rootValue: 37.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
					rootValue({ file }) {
						// 如果是 Vant 的样式就按照 37.5 处理转换
						// 如果是我们自己的样式就按照 75 处理转换
						// console.log(file)
						return file.indexOf('nut') !== -1 ? 37.5 : 75
						// 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
						// 多少就直接写多少即可，不用除以2了
					},
					propList: ['*'] // 需要转换的属性，这里选择全部都进行转换
				})
			]
		}
	}
})
